<template>
  <div id="app">
    <RouterView  :key="currentRoute.fullPath"/>
  </div>
</template>

<script setup>
import { reactive, toRefs, onBeforeMount, onMounted, watch } from "vue";
import { useRouter, RouterView } from "vue-router";
import { useAppStore } from '@/stores/modules/app'
const appStore = useAppStore()

const router = useRouter();
const { currentRoute } = useRouter()
const state = reactive({
  transitionName: "slide-left",
});
router.beforeEach((to, from) => {
  if (to.meta.index > from.meta.index) {
    state.transitionName = "slide-left"; // 向左滑动
  } else if (to.meta.index < from.meta.index) {
    // 由次级到主级
    state.transitionName = "slide-right";
  } else {
    state.transitionName = ""; // 同级无过渡效果
  }
});

</script>

<style lang="less">
body {
  height: 100%;
  // overflow: hidden;
  /* overflow-y: scroll; */
  font-family: "PingFang SC-Regular, PingFang SC";
}
#app {
  height: 100%;
  color: #333;
  font-size: 14px;
}
.el-badge__content--danger {
    border: none !important;
    background-color: #E1251B !important;
}

.el-button--primary:hover{
  background-color: rgba(226,36,27, 0.7) !important;
  border-color: rgba(226,36,27, 0.7) !important;
}
</style>
